<template>
  <el-container class="login-container">
    <el-main>
      <dv-border-box-1 class="login-box">
        <el-form :model="loginForm" label-width="80px" class="login-form">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onLogin" class="login-button">登录</el-button>
          </el-form-item>
        </el-form>
      </dv-border-box-1>
      <!-- 添加标题 -->
      <div class="login-title">农业数据可视化大屏</div>
    </el-main>
  </el-container>
</template>

<script>
import { BorderBox1 } from '@kjgl77/datav-vue3';
import http from '@/api/greenhouse';

export default {
  components: {
    'dv-border-box-1': BorderBox1,
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    async onLogin() {
      try {
        const response = await http.post('/login', {
          username: this.loginForm.username,
          password: this.loginForm.password,
        });

        if (response === '登录成功') {
          // 假设后端返回了 token 和用户角色
          const token = 'your-token-from-backend'; // 从后端获取 token
          const userRole = 'admin'; // 从后端获取用户角色

          // 将 token 和用户角色存储到 localStorage
          localStorage.setItem('token', token);
          localStorage.setItem('userRole', userRole);

          // 跳转到仪表盘页面
          this.$router.push('/dashboard');
        } else {
          this.$message.error('用户名或密码错误');
        }
      } catch (error) {
        this.$message.error('登录失败，请检查网络或联系管理员');
      }
    },
  },
};
</script>
<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.login-box {
  width: 400px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
}


.login-form {
  margin-top: 20px;
}

.login-button {
  width: 100%;
}

.el-form-item >>> .el-form-item__label {
  color: white !important;
}
.login-title {
  position: absolute;
  right: 20px; /* 根据需要调整位置 */
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 5vw; /* 增大字体 */
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), /* 阴影 */
  -1px -1px 4px rgba(255, 255, 255, 0.5); /* 倒影效果 */
}

</style>
